<template>
  <!-- 产品列表 -->
  <div class="pro-list">
    <van-row class="filter">
      <van-dropdown-menu>
        <van-dropdown-item title="Style" ref="value1">
          <van-button
            plain
            type="default"
            v-for="item in option1"
            :key="item.value"
            size="small"
          >{{ item.text }}</van-button>
          <van-row class="submit" type="flex" justify="space-between">
            <van-button plain color="#333">Reset</van-button>
            <van-button plain color="#f40" @click="onConfirm">Done</van-button>
          </van-row>
        </van-dropdown-item>
        <van-dropdown-item v-model="value2" :options="option2" />
        <van-dropdown-item disabled>
          <template #title>
            <span @click="showFilter">
              Filter
              <van-icon name="filter-o" />
            </span>
          </template>
        </van-dropdown-item>
      </van-dropdown-menu>
    </van-row>
    <!-- 列表 -->
    <van-grid class="list" :column-num="2" :border="false" :gutter="0">
      <van-grid-item v-for="value in 6" :key="value" to="/pro-detail">
        <van-row class="img">
          <van-image
            src="https://color-xu.gitee.io/resource/FrontWeb/images/bnr1.png"
          />
          <van-icon name="like-o" />
        </van-row>
        <div class="text">
          <div class="desc">Five Toes</div>
          <div class="price">$ 9.72</div>
        </div>
      </van-grid-item>
    </van-grid>
  </div>
</template>
<script>
import { ref } from 'vue'

export default {
  name: "ProList",
  setup() {
    const value1 = ref(null)
    const value2 = ref('a')
    const option1 = [
      { text: 'Nordic & modern', value: 0 },
      { text: 'Farmhouse & Rustic', value: 1 },
      { text: 'Bohemia', value: 2 },
    ]
    const option2 = [
      { text: '默认排序', value: 'a' },
      { text: '好评排序', value: 'b' },
      { text: '销量排序', value: 'c' },
    ]
    const onConfirm = () => {
      value1.value.toggle()
    };
    return {
      value1,
      value2,
      option1,
      option2,
      onConfirm,
    }
  },
  data() {
    return {
    }
  },
  methods: {
    showFilter() {
      alert(1)
    },
  },
}
</script>
<style lang="scss" scoped>
.pro-list {
  --van-grid-item-content-padding: 0 5px;

  .filter {
    .van-dropdown-menu {
      width: 100%;

      .van-button {
        margin: 12px 12px 0;
      }

      .submit {
        margin-bottom: 12px;
      }
    }
  }
  
  .list {
    padding: 0 12px !important;

    .img {
      position: relative;

      .van-icon {
        position: absolute;
        right: 5px;
        bottom: 5px;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.6);
        text-align: center;
        line-height: 28px;
        font-size: 18px;
        font-weight: bold;
      }
    }

    .text {
      width: 100%;
      color: #666;
      margin-bottom: 20px;

      .desc {
        margin: 24px 0 0;
      }

      .price {
        color: #333;
        font-size: 18px;
      }
    }
  }
}
</style>